<template>
  <div>
    <div v-if="shows == 'list'">
      <Header>
        <el-button size="small" type="primary" @click="add">新建砍价</el-button>
      </Header>
      <Header :type="'screening'" @tag="getList" @reset="reset">
        <div class="head-tit">
          内容筛选
        </div>
        <div class="head-operation">
          <span class="head-label">
            活动名称：
          </span>
          <el-input
            v-model="searchName"
            placeholder="请输入名称"
            size="small"
            class="head-input"
          >
          </el-input>
          <span class="head-label">
            选择状态：
          </span>
          <el-select
            v-model="selectVal"
            placeholder="请选择"
            size="small"
            class="head-input"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div class="head-operation">
          <span class="head-label">
            选择时间：
          </span>
          <div class="head-time">
            <el-date-picker
              v-model="time"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              size="small"
              style="width:100%"
            >
            </el-date-picker>
          </div>
        </div>
      </Header>
      <Main :data="listData" :footer-lock="totals > 10">
        <el-table-column
          label="活动名称"
          align="center"
          property="title"
        ></el-table-column>
        <el-table-column label="活动封面" align="center">
          <template slot-scope="scope">
            <img
              :src="
                $store.state.qiniu + scope.row.cover + $store.state.imgRotate
              "
              width="80px"
            />
          </template>
        </el-table-column>

        <el-table-column label="砍价类别" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 'low'">砍至底价</span>
            <span v-if="scope.row.type === 'zero'">砍至0元</span>
          </template>
        </el-table-column>
        <el-table-column
          label="浏览量（PV）"
          align="center"
          property="pv"
        ></el-table-column>
        <el-table-column
          label="访问量（UV）"
          align="center"
          property="uv"
        ></el-table-column>
        <el-table-column
          label="发起人数"
          align="center"
          property="set_people"
        ></el-table-column>
        <el-table-column
          label="帮砍人数"
          align="center"
          property="help_people"
        ></el-table-column>
        <el-table-column
          label="砍价成功数"
          align="center"
          property="success_sum"
        ></el-table-column>
        <el-table-column label="有效期" align="center">
          <template slot-scope="scope">
            {{ scope.row.stime }} 至 {{ scope.row.etime }}
          </template>
        </el-table-column>
        <el-table-column
          label="活动商品（件）"
          align="center"
          property="goods_sum"
        ></el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.state == 'not'" style="color:#909399;">
              未开始
            </span>
            <span v-if="scope.row.state == 'ing'" style="color:#67C23A;">
              进行中
            </span>
            <span v-if="scope.row.state == 'over'" style="color:#F56C6C;">
              结束
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="250"
          class-name="tableoperation"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              :disabled="scope.row.status != 'not'"
              @click="del('up', '是否上架此活动', scope.row.bargain_id)"
            >
              上架
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="manage(scope.row.bargain_id)"
            >
              管理商品
            </el-button>
            <el-button size="mini" type="text" @click="msg(scope.row)">
              编辑活动
            </el-button>
            <el-button size="mini" type="text" @click="msg(scope.row)">
              砍价详情
            </el-button>
            <el-button
              size="mini"
              type="text"
              :disabled="scope.row.status == 'ing'"
              @click="del('del', '是否删除此活动', scope.row.bargain_id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </Main>
      <Footer :total="totals">
        <el-pagination
          :page-size="10"
          layout="prev, pager, next"
          :total="totals"
          @current-change="changes"
        >
        </el-pagination>
      </Footer>
    </div>
    <Form v-if="shows == 'add'" :data-val="dataVal" @out="out" />
    <shop
      v-if="shows == 'shop'"
      :assemble-id="assembleId"
      :types="types"
      @out="out"
    />
  </div>
</template>
<script>
import { BARGAIN_LIST, up_down } from "../service";

export default {
  components: {
    Form: () => import("./form"),
    shop: () => import("./component/shop")
  },
  data() {
    return {
      listData: [],
      options: [
        { label: "全部", value: "0" },
        { label: "未开始", value: "not" },
        { label: "进行中", value: "ing" },
        { label: "已结束", value: "over" }
      ],
      totals: 0,
      pages: 0,
      shows: "list",
      selectVal: "0",
      searchName: "",
      time: [],
      assembleId: -1,
      types: "edit"
    };
  },

  created() {
    this.getList();
  },
  methods: {
    manage(e) {
      this.shows = "shop";
      this.assembleId = e;
    },
    msg(e) {
      this.shows = "add";
      this.dataVal = e;
    },
    add() {
      this.shows = "add";
      this.dataVal = {};
    },
    out() {
      this.shows = "list";
      this.getList();
    },
    async del(type, tit, id) {
      await this.$confirm(tit, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          up_down({ bargain_id: id, type }).then(({ code, msg }) => {
            if (code === 200) {
              this.getList();
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        })
        .catch(() => {
          this.$message.info("已取消!");
        });
    },
    reset() {
      this.searchName = "";
      this.selectVal = "0";
      this.time = [];
      this.getList();
    },
    async getList() {
      await BARGAIN_LIST({
        page: this.pages,
        pageshow: 10,
        title: this.searchName,
        stime: this.time.length > 0 ? this.time[0] : "",
        etime: this.time.length > 0 ? this.time[1] : "",
        state: this.selectVal
      }).then(({ code, data, msg }) => {
        if (code === 200) {
          this.totals = data.count;
          this.listData = data.list;
        } else {
          this.totals = 0;
          this.listData = [];
          this.$message.error(msg);
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    }
  }
};
</script>
